<template>
  <div class="Dashboard">
    <div>
      <el-button type="primary" @click="showOff">新增模板</el-button>
    </div>
    <div class="tableBox">
      <!-- 表格数据 -->
      <el-table
        :header-cell-style="{ 'background-color': '#f8faff' }"
        border
        :data="listData"
        resizable="false"
        style="width: 100%"
      >
        <el-table-column label="模板类型" width="188" prop="continuousWeight" />
        <el-table-column prop="transportType" label="运送类型" width="187" />
        <el-table-column
          prop="associatedCityList"
          label="关联城市"
          width="102"
        />
        <el-table-column label="首重" width="102" prop="firstWeight" />
        <el-table-column label="续重" width="153" prop="continuousWeight" />
        <el-table-column
          label="轻抛系数"
          width="153"
          prop="lightThrowingCoefficient"
        />
        <el-table-column label="操作">
          <template #default="{ row }">
            <div class="boxrr">
              <span style="color: #419eff">编辑</span>
              ｜
              <span style="color: #f56c6c">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <!-- <div class="demo-pagination-block">
        <el-pagination
          :page-sizes="[100, 200, 300, 400]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(tableData.counts)"
          @change="currentChange"
        />
      </div> -->
    </div>
    <CommonDilog :title="title" ref="showDilog" />
  </div>
</template>
<script setup lang="ts">
import { FreightManagement } from '../../api/Types/FreightManagement';
let listData = reactive<FreightManagement[]>([]);
let showDilog = ref(null);
let title = ref('新增车型');
import { managerCarriagesApi } from '../../api/FreightManagement';
import CommonDilog from '../../components/CommonDilog.vue';

managerCarriagesApi().then((res) => {
  listData = res.data;
});

// 显示弹窗
function showOff() {
  showDilog.value.DialogSwitch(true);
}
</script>
<style lang="less" scoped>
@import url(./index.less);
</style>
